<template>
    <div>
        <div style="display: flex; height: 1.5rem; border-bottom: 1px solid #EBEBEB">
            <div style="width: 15%;">
                <div
                    style="display: flex; border-right: 1px solid #cfcfcf; justify-content: flex-end; background-color:#ECECEC; height: .8rem; margin-top: .4rem; line-height: .8rem; margin-left: .3rem; border-radius:.2rem 0   0 .2rem;">
                    <div>{{ phoneNumber }}</div>
                    <div @click="goNumberArea"><van-icon class-prefix=" icon" name="youjiantou"></van-icon></div>
                </div>
            </div>
            <div style="width: 70%;">
                <input type="text" v-model="num" @focus="showomit"
                    style="width:7rem; height: .8rem; margin-top: .4rem;background-color:#ECECEC; border: none;">
            </div>
            <div style="width:15%;">
                <div style="color:#00C9E2; font-size: .45rem; text-align: center; line-height: 1.5rem;" @click="onClick">取消
                </div>
            </div>
        </div>
        <!-- 点击显示验证码 -->
        <div class="Number-search" @click="showomits" v-if="showOmit">
            <div class="omit">···</div>
            <div>点击搜索手机号</div>
            <div class="omit-number">{{ phoneNumber }}</div>
            <div class="omit-number">-</div>
            <div class="omit-number">{{ num }}</div>
        </div>

        <!-- 没有订单时显示 -->
        <div v-else>
            <div class="search">
                <img src="	https://source.qunarzz.com/ordercenter/new_mobile/search-icon-hd.png" alt="">
                <div style="color: rgb(211, 211, 211); margin-top:.5rem;">请输入联系人手机号找到对应订单</div>
            </div>
        </div>

        <div class="shade">
            <van-popup class="popup-box" v-model="show" closeable close-icon-position="top-left" position="top"
                :style="{ height: '30%', top: '10%', left: '10%' }">
                <div class="oppup-title">请输短信验证码</div>
                <div style="width: 100%; border-bottom: 1px solid #cccccc;"></div>
                <div style="display: flex; justify-content: center;  font-size: .4rem; margin: .5rem; line-height: 1rem;">
                    <div style="color: rgb(174, 174, 174);">短信已发送至</div>
                    <div>{{ num }}</div>
                </div>
                <div style="width: 80%; border: 1px solid #cccccc; margin: 0 auto;">
                    <van-field v-model="randomNumber" center clearable>
                        <template #button>
                            <van-button size="small" @click="add">再次获取</van-button>
                        </template>
                    </van-field>
                </div>

            </van-popup>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant'

export default {
    data() {
        return {
            // 输入框值
            num: "",
            //验证码
            randomNumber: "",
            //输入框聚焦
            showOmit: false,
            //弹出框
            show: false,
            //电话号前缀
            phoneNumber: ''

        };
    },


    methods: {
        //区号选择
        goNumberArea() {
            this.$router.push("/NumberArea")
        },
        //取消后退
        onClick() {
            this.$router.push('OrderForm')
        },
        //点击发送
        showomits() {
            if (!this.num) {
                Toast('式不正确');
            } else if (!/^\d{11}$/.test(this.num)) {
                Toast('必须输入11位数字');
            } else {
                this.show = true;
                this.randomNumber = '';
                this.add();
            }
        },
        //输入验证码
        add() {
            this.randomNumber = ""
            setTimeout(() => {
                this.randomNumber = Math.floor(Math.random() * 9000 + 1000);
                Toast('验证成功');
            }, 2000);
        },
        //聚焦显示
        showomit() {
            // 当输入框获得焦点时调用此方法
            this.showOmit = true;
        },
    },
    created() {
        // 在组件创建时获取路由参数中的 phoneNumber 值
        this.phoneNumber = this.$route.params.phoneNumber || '+86';
    }
};
</script>

<style scoped>
.search {
    width: 100%;
    height: 2rem;
    text-align: center;
    margin-top: 3rem;
}

.search img {
    width: 2rem;
    height: 3rem;
}

.Number-search {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    font-size: .4rem;
    line-height: 1rem;
}

.omit {
    display: flex;
    color: #fff;
    background-color: #00C9E2;
    border-radius: 50%;
    width: .5rem;
    height: .5rem;
    font-size: .5rem;
    text-align: center;
    line-height: .5rem;
    margin: .3rem .3rem 0 .3rem;
}

.omit-number {
    margin: 0 .1rem .1rem .1rem;
    color: #00C9E2;
}

.popup-box {
    display: flex;
    flex-direction: column;
    font-size: .5rem;
    width: 80%;
}

.oppup-title {
    text-align: center;
    margin: .4rem;
}

.van-button {
    background-color: #00C9E2;
    color: #fff;
    border-radius: .2rem;
}
</style>